<template>
	<uni-popup ref="myPopup" :mask-click="false">
		 <view class="popup-content">
			<view class="popup-title">{{title}}</view>
			<view class="popup-tip-info">
				{{tipInfo}}
			</view>
			<view class="popup-btns">
				<button class="btn " type="default" @click="clickFn('left')">{{leftBtn}}</button>
				<button class="btn btn1" type="primary"  @click="clickFn('right')">{{rightBtn}}</button>
				
			</view>
		 </view>
	</uni-popup>
</template>

<script>
	export default {
		name:"my-popup",
		props:{
			title:{
				type: String,
				default: '温馨提示'
			},
			tipInfo:{
				type: String,
				default: ''
			},
			leftBtn:{
				type: String,
				default: ''
			},
			rightBtn:{
				type: String,
				default: ''
			}
		},
		data(){
			return {
				
			};
		},
		methods:{
			clickFn(type){
				this.$emit('clickFn', type)
				this.$refs.myPopup.close()
			}
		}
	}
</script>

<style lang="scss">
.popup-content{
	 	width: 550rpx;
	 	height: 300rpx;
	 	padding: 40rpx;
	 	background:#fff;
	 	border-radius: 10rpx;
	 	font-size: 24rpx;
	 	text-align: center;
	 	padding-top: 80rpx;
	 	background: #fff linear-gradient( 180deg, rgba(2,177,170,0.12) 0%, rgba(0,214,142,0) 20%);
	 	border-radius: 16rpx 16rpx 16rpx 16rpx;
	 	.popup-title{
	 		font-size: 32rpx;
	 		font-weight: 600;
	 		line-height: 40rpx;
	 	}
	 	.popup-tip-info{
	 		    line-height: 40rpx;
	 		    height: 180rpx;
	 		    display: flex;
	 		    justify-content: center;
	 		    align-items: center;
	 	}
	 	.popup-btns{
	 		width: 500rpx;
	 		margin: 0 auto;
			display: flex;
	 		.btn{
	 			height: 80rpx;
	 			line-height: 80rpx;
	 			font-size: 26rpx;
	 			margin-bottom: 30rpx;
				width: 200rpx;
				background: #EFF0F2;
				color: #030304;
	 		}
	 		.btn1{
	 			background: #02B1AA;
				color: #fff;
	 		}
	 	}
	 }
</style>